<template>
    <div>
        <el-card>
            <el-page-header content="产品列表" icon="" title="产品管理"></el-page-header>
            <el-table :data="tableData" height='600px' style="width: 100%">
                <el-table-column prop="title" label="产品名称" width="120"/>
                <el-table-column  prop="cover" label="封面" width="100">
                    <template  #default="scope">
                        <img class="the_img" :src="scope.row.cover?scope.row.cover:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'">
                    </template>
                </el-table-column>
                <el-table-column prop="introduction" label="简要描述" />
                <el-table-column prop="editTime" label="更新时间">
                    <template #default="scope">
                        {{ formatTime.getTime(scope.row.editTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small"  
                        @click="handleEdit(scope.row)"
                        circle :icon="Edit"
                        ></el-button>
                        <el-popconfirm title="你确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button size="small"  
                                type=danger
                                circle :icon="Delete"
                                ></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {getProductAPI,deleteProductAPI} from '@/api'
import formatTime from '@/until/formatTime'
import {Edit,Delete} from '@element-plus/icons-vue';
import {ElMessage} from 'element-plus'
import {useRouter} from 'vue-router'

const router=useRouter()
const tableData=ref([])
onMounted(()=>{
    getTableData()
})
// 获取产品信息
const getTableData=async()=>{
    const {data:res}=await getProductAPI()
    tableData.value=res.product
}
// 删除产品
const handleDelete=async (item)=>{
    console.log(item.id);
    const {data:res}=await deleteProductAPI(item.id)
    if(res.status!==0 && res.message==="OK"){
        ElMessage.error('删除失败')
    }else{
        ElMessage.success('删除成功')
        getTableData()
    }
}

// 编辑产品
const handleEdit=(item)=>{
    router.push(`/product-manage/productedit/${item.id}`)
}
</script>

<style lang="scss" scoped>
::v-deep .htmlcontent{
    img{
        max-width:100%
    }
}
.el-table{
    margin-top:50px
}
.the_img{
    width: 50px;
    height: 50px;
}
</style>